<template>
  <div>
      <el-col :span="20" style="text-align: left">
          <el-form :inline="true" :model="queryMap" ref="queryMapRef" class="demo-form-inline">
              <el-form-item label="员工姓名" v-show="this.$route.params.job === 'manager'" >
                  <el-input v-model="queryMap.ename" style="width: 200px;"></el-input>
              </el-form-item>
              <el-form-item label="漏报日期" >
                  <div class="block">
                      <el-date-picker
                          v-model="queryMap.failReportdate"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          :clearable="false"
                          style="width: 200px"
                          :picker-options="selDate">
                      </el-date-picker>
                  </div>
              </el-form-item>
              <el-form-item >
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="primary" @click="reset">重置</el-button>
              </el-form-item>
          </el-form>
      </el-col>
      <el-col :span="4" style="text-align: right">
          <el-button type="primary" @click="updateDate('-')">前一天</el-button>
          <el-button type="primary" @click="updateDate('+')">后一天</el-button>
      </el-col>
      <el-table
          :data="failReportTableData"
          stripe
          border
          style="width: 100%"
          height="545px"
          :row-style="{height: '0'}"
          :header-cell-style="{'text-align': 'center', 'background-color': '#48A9F1', color: 'white'}">
          <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center">
          </el-table-column>
          <el-table-column
              prop="ename"
              label="员工姓名"
              align="center">
          </el-table-column>
          <el-table-column
              label="员工编号"
              align="center">
              <template slot-scope="scope">
                  <span>{{ scope.row.empno }}</span>
              </template>
          </el-table-column>

          <el-table-column
              label="漏报日期"
              align="center">
              <template slot-scope="scope">
                  <span>{{ scope.row.dt }}</span>
              </template>
          </el-table-column>
          <el-table-column
              label="漏报/驳回"
              align="center">
              <template slot-scope="scope">
                  <span>{{scope.row.return_reason === undefined ? '漏报' : '驳回'}}</span>
              </template>
          </el-table-column>

          <el-table-column
              label="操作"
              align="center"
              v-if="this.$route.params.job == 'emp'">
              <template slot-scope="scope">
                  <el-button type="text" @click="toReportPage(scope.$index, scope.row)">{{scope.row.return_reason === undefined ? '立即补报' : '重新填报'}}</el-button>
              </template>
          </el-table-column>
      </el-table>
      <!-- 分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryMap.page"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="queryMap.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
  </div>
</template>

<script>
export default {
    name: "AllFailReport",
    data() {
        return {
            queryMap: {
                failReportdate: '',
                ename: '',
                //从部门漏报进来的，查询时不需要empno，从个人漏报进来的，查询自己的漏报需要empno
                empno: this.$route.params.job === 'manager' ? 0 : this.$store.state.emp.empno,
                deptno: this.$store.state.emp.deptno,
                page: 1,
                limit: 10,
            },
            failReportTableData: [],
            total: 0,
            selDate: {
                disabledDate: this.disabledDateMethod,
            }
        }
    },
    methods: {
        getFailReport() {
            const self = this
            self.$http.post('getFailReport', self.queryMap).then(res => {
                self.failReportTableData = res.data.data
                self.total = res.data.count
            }).catch(() => {
                self.$message.error('获取漏报信息失败，请联系管理员')
            })
        },
        search() {
            this.queryMap.page = 1
            this.getFailReport()
        },
        reset() {
            this.queryMap.failReportdate = ''
            this.queryMap.ename = ''

            this.search()
        },
        //每页条数改变，val改变后的条数
        handleSizeChange(val) {
            this.queryMap.limit = val;
            this.queryMap.page = 1
            this.getFailReport()
        },
        //页码改变，val改变后的页码
        handleCurrentChange(val) {
            this.queryMap.page = val
            this.getFailReport()
        },
        //禁选当天之后的日期
        disabledDateMethod(time) {
            return time.getTime() > Date.now() - 8.64e7
        },
        //后一天
        updateDate(val) {
            //获取日期框内容
            let failReportdate = this.queryMap.failReportdate
            //获取昨天的日期
            let yesterday = this.toDate(Date.now() - 8.64e7)
            if(failReportdate === '') {
                //如果日期框内容为空，点击后一天则显示昨天的日期
                this.queryMap.failReportdate = yesterday
            } else {
                if(val === '+') {
                    if(failReportdate !== yesterday) {
                        failReportdate = new Date(failReportdate).getTime() + 8.64e7
                    }
                } else {
                    failReportdate = new Date(failReportdate).getTime() - 8.64e7
                }
                this.queryMap.failReportdate = this.toDate(failReportdate)
            }
            this.search()
        },

        toDate(val) {
            let toDate = new Date(val)
            let year = toDate.getFullYear()
            let month = toDate.getMonth() + 1
            if(month < 10) {
                month = "0" + month
            }
            let date = toDate.getDate()
            if(date < 10) {
                date = "0" + date
            }
            return year + "-" + month + "-" + date
        },
        //立即补报或重新填报
        toReportPage(index, row) {
            let reportdate = row.dt
            this.$router.push({name: 'reportPage', query: {reportdate}})
        }
    },
    created() {
        this.getFailReport()
    },
    watch:{
        //监听路由的变化
        '$route'(to,from){
            //修改导航菜单的选中
            this.$router.go(0)
        }
    },
}
</script>

<style scoped>

</style>